<template>
  <top-nav>
    <div>
      <slot>商家列表</slot>
    </div>
  </top-nav>
  <div class="more">
    <ul>
      <li v-for="(shop, index) in shops" :key="index" @click="toShop(shop.id)">
        <img :src="`http://121.199.173.91/assets/images/${shop.photo}`" alt="">
        <div class="shopAll">
          <p class="shopName">{{shop.name}}</p>
          <p class="shopFees">￥{{shop.deliveryPrice}}起送|￥{{shop.minPrice}}配送</p>
          <p class="shopBrief">{{shop.description}}</p>
        </div>
      </li>
    </ul>
  </div>
  <bottom-nav></bottom-nav>
</template>

<script>
import TopNav from "@/components/TopNav.vue";
import BottomNav from "@/components/BottomNav.vue";
import request from "@/request";

export default {
  name:"MoreView",
  components:{
    TopNav,
    BottomNav
  },
  data(){
    return{
      viewMessage:"商家列表",
      shops:[],
      bannerId:null,
    }
  },
  methods:{
    toShop(id){
      this.$router.push({path:"/shop",query:{shopId:id}})
    },
    loadShopInfo(){
      request({
        method:"get",
        url:"/shop-service/shop/getShopInfo/" + this.bannerId,
      }).then((respData) =>{
        if(respData.code == 200){
          this.shops = respData.data;
        }else{
          console.log(respData.msg);
        }
      }).catch((error) => {
        console.error(error)
      })
    }
  },
  created(){
    this.bannerId = this.$route.query.bannerId;
    this.loadShopInfo();
  }
}
</script>

<style scoped>
img{
  /* 取消图片拖动 */
  -webkit-user-drag: none;
}
.more ul{
  width: 100%;
  margin-bottom: 13vw;
}
.more li{
  box-sizing: border-box;
  padding: 2.5vw;
  display: flex;
  border-bottom: 1px solid #EEEEEE;
}
.more img{
  width: 20vw;
}
.more p{
  margin: 1.5vw 0 1.5vw 2vw;
}
.more .shopName{
  font-size: 4vw;
  font-weight: bold;
  color: black;
}
.more .shopFees{
  font-size: 3vw;
  color: gray;
}
.more .shopBrief{
  font-size: 3vw;
  color: gray;
}
</style>